<template>
    <SysDialog :title="dialog.title" :width="dialog.width" :height="dialog.height" :visible="dialog.visible"
        @onClose="onClose" @onConfirm="commit">
        <template v-slot:content>
            <el-tree ref="assignTee" :data="assignTreeData.list" node-key="menuId" :props="defaultProps" empty-text="暂无数据"
                :show-checkbox="true" :highlight-current="true" default-expand-all
                :default-checked-keys="assignTreeData.assignTreeChecked"></el-tree>
        </template>
    </SysDialog>
</template>
<script setup lang="ts">
import {User} from "@/api/user/UserModel";
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import {assigSaveApi, getAssignTreeApi} from "@/api/user/index";
import {reactive, ref} from "vue";
import {userStore} from "@/store/user";
import {ElMessage, ElTree} from 'element-plus'

const defaultProps = {
    children: 'children',
    label: 'label',
}
const assignTee = ref<InstanceType<typeof ElTree>>()
const store = userStore()
//获取弹框属性
const { dialog, onClose, onShow } = useDialog();
//查询树的参数
const parms = reactive({
    userId: "", //当前登录用户的id
    assId: "",
});
//提交的参数
const commitParm = reactive({
    assId: '',
    list: [] as string[]
})
//弹框显示的方法
const show = (row: User) => {
    //要分配的用户的id
    commitParm.assId = ''
    commitParm.list = [];
    commitParm.assId = row.userId
    parms.assId = row.userId;
    parms.userId = store.getUserId
    console.log(parms)
    getAssignTree();
    console.log(row);
    dialog.title = "为【" + row.nickName + "】分配菜单";
    dialog.width = 300;
    dialog.height = 450;
    onShow();
};
//定义树的数据
const assignTreeData = reactive({
    assignTreeChecked: [],
    list: [],
});
//获取树数据
const getAssignTree = async () => {
    let res = await getAssignTreeApi(parms);
    if (res && res.code == 200) {
        assignTreeData.list = res.data.menuList;
        assignTreeData.assignTreeChecked = res.data.checkList
        //数据回显，判断角色原来是否已经分配过权限，如果有，回显 
        if (assignTreeData.assignTreeChecked.length > 0) {
            let newArr: any = [];
            assignTreeData.assignTreeChecked.forEach((item => {
                checked(item, assignTreeData.list, newArr)
            }))
            assignTreeData.assignTreeChecked = newArr;
        }
    }
};
const checked = (id: number, data: any, newArr: any) => {
    data.forEach((item: any) => {
        if (item.menuId == id) {
            if (item.children && item.children.length == 0) {
                newArr.push(item.menuId)
            }
        } else {
            if (item.children && item.children.length != 0) {
                //递归调用
                checked(id, item.children, newArr)
            }
        }
    })
}
//提交保存
const commit = async () => {
    let checkedIds = assignTee.value?.getCheckedKeys(false) as string[]
    let halfIds = assignTee.value?.getHalfCheckedKeys() as string[]
    let ids = checkedIds.concat(halfIds) as string[]
    if (ids.length == 0) {
        ElMessage.warning('请选择一个菜单~~')
        return
    }
    commitParm.list = ids;
    let res = await assigSaveApi(commitParm)
    if (res && res.code == 200) {
        ElMessage.success(res.msg);
        onClose()
    }
}
//暴露出去，给外部组件调用
defineExpose({
    show,
});
</script>
<style scoped></style>